<template>
  <nav 
    :class="[
      'bx-breadcrumb',
      {
        [`bx-breadcrumb--${size}`]: size
      }
    ]"
  >
    <ol class="bx-breadcrumb__list">
      <li 
        v-for="(item, index) in items"
        :key="index"
        :class="[
          'bx-breadcrumb__item',
          {
            'bx-breadcrumb__item--active': index === items.length - 1
          }
        ]"
      >
        <component
          :is="item.href ? 'a' : 'span'"
          :href="item.href"
          :class="[
            'bx-breadcrumb__link',
            {
              'bx-breadcrumb__link--clickable': item.href || item.onClick
            }
          ]"
          @click="handleItemClick(item, index)"
        >
          <BxIcon v-if="item.icon" :name="item.icon" class="bx-breadcrumb__icon" />
          {{ item.title }}
        </component>
        
        <span 
          v-if="index < items.length - 1"
          class="bx-breadcrumb__separator"
        >
          <slot name="separator">
            <BxIcon :name="separatorIcon" />
          </slot>
        </span>
      </li>
    </ol>
  </nav>
</template>

<script>
import BxIcon from '../basic/BxIcon.vue'

export default {
  name: 'BxBreadcrumb',
  components: {
    BxIcon
  },
  props: {
    items: {
      type: Array,
      default: () => [],
      validator: (items) => {
        return items.every(item => 
          typeof item === 'object' && 
          typeof item.title === 'string'
        )
      }
    },
    separator: {
      type: String,
      default: '/'
    },
    separatorIcon: {
      type: String,
      default: 'chevron-right'
    },
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    }
  },
  emits: ['click'],
  setup(props, { emit }) {
    const handleItemClick = (item, index) => {
      if (item.onClick) {
        item.onClick(item, index)
      }
      emit('click', item, index)
    }

    return {
      handleItemClick
    }
  }
}
</script>

<style scoped>
.bx-breadcrumb {
  font-family: var(--bx-font-family);
  color: var(--bx-text-secondary);
}

.bx-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--bx-spacing-xs);
}

.bx-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--bx-spacing-xs);
}

.bx-breadcrumb__link {
  display: flex;
  align-items: center;
  gap: var(--bx-spacing-xs);
  text-decoration: none;
  color: inherit;
  transition: color var(--bx-transition-medium);
  border-radius: var(--bx-radius-small);
  padding: 2px 4px;
}

.bx-breadcrumb__link--clickable {
  cursor: pointer;
}

.bx-breadcrumb__link--clickable:hover {
  color: var(--bx-text-primary);
  background: var(--bx-glass-bg-hover);
}

.bx-breadcrumb__item--active .bx-breadcrumb__link {
  color: var(--bx-text-primary);
  font-weight: 500;
}

.bx-breadcrumb__icon {
  font-size: 0.9em;
}

.bx-breadcrumb__separator {
  display: flex;
  align-items: center;
  color: var(--bx-text-tertiary);
  font-size: 12px;
  user-select: none;
}

/* 尺寸变体 */
.bx-breadcrumb--small {
  font-size: 12px;
}

.bx-breadcrumb--small .bx-breadcrumb__separator {
  font-size: 10px;
}

.bx-breadcrumb--medium {
  font-size: 14px;
}

.bx-breadcrumb--medium .bx-breadcrumb__separator {
  font-size: 12px;
}

.bx-breadcrumb--large {
  font-size: 16px;
}

.bx-breadcrumb--large .bx-breadcrumb__separator {
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bx-breadcrumb {
    font-size: 13px;
  }
  
  .bx-breadcrumb--small {
    font-size: 11px;
  }
  
  .bx-breadcrumb--large {
    font-size: 15px;
  }
  
  .bx-breadcrumb__list {
    gap: 2px;
  }
  
  .bx-breadcrumb__item {
    gap: 2px;
  }
  
  .bx-breadcrumb__link {
    gap: 2px;
    padding: 1px 2px;
  }
}
</style>

